<template>
    <div class="backgroundColor1 container forget fixed">
      <Header content="忘记密码"></Header>
      <div class="forgetInput login">
        <group>
          <x-input name="mobile" placeholder="手机号" keyboard="number" v-model="email" class="font15"></x-input>
        </group>
        <group>
          <x-input name="mobile" placeholder="验证码" keyboard="number"  v-model="code" class="font15">
            <span slot="right" :class="{defaultColor:!codeDisabled,disabledColor:codeDisabled}" @click="openDialog">{{codeContent}}</span>
          </x-input>
        </group>
        <group>
          <x-input placeholder="6-64位数字、字母或符号" name="mobile" keyboard="number" v-model="pwd" class="font15" :type="passwordType"></x-input>
        </group>
        <group>
          <x-input placeholder="再次输入登录密码" name="email" :type="passwordType" v-model="repwd" class="font15" type="password"></x-input>
        </group>
        <div style="margin-top: 30px;" class="login">
          <x-button type="primary" @click.native="submitPwd" :disabled="submitDisabled">确认修改</x-button>
        </div>
      </div>
      <Captcha
        :email="email"
        :showToast="showToast"
        @close="close"
        @setInter="setInter"
      ></Captcha>
    </div>
</template>
<style>
</style>
<script>
import Header from './common/header.vue'
import { XInput,Group } from 'vux'
import Captcha from './common/captcha.vue'
export default{
  data(){
      return {
        email: '',
        code:'',
        pwd:'',
        repwd:'',
        passwordType:'password',
        submitDisabled:false,
        codeDisabled:false,
        codeContent:'发送验证码',
        showToast:false,
        imgCode:'',
        imgSrc:'',
        captchaKey:'',
        codeDisabled:false,
        smsId:''
      }
  },
  methods:{
    close(){
      this.showToast = false;
    },
    setInter(){
      var count = 60;
      this.codeContent = count + 's';
      this.codeDisabled = true;
      this.timer = setInterval(()=>{
        count--;
        this.codeContent = count + 's';
        if(count<=0){
          clearInterval(this.timer);
          this.codeDisabled = false;
          this.codeContent = '发送验证码';
        }
      },1000)
    },
    openDialog(){
      if(this.codeDisabled){
        return;
      }
      if(!this.regex().phoneReg.test(this.email)){
        this.toastFn('请先填写正确的手机号');
        return;
      }
      this.service('smscode',{
        phone:this.email
      },'post').then(res=>{
        if(res.code== 200){
          this.toastFn(res.msg,'','success');
          this.setInter()
          return
        }
        this.toastFn(res.msg);
      })
    },
    regFn(){
      if(!this.regex().phoneReg.test(this.email)){
        this.toastFn('请输入格式正确的手机号');
        return false;
      }
      if(!this.regex().code.test(this.code)){
        this.toastFn('请输入格式正确的验证码');
        return false;
      }
      if(this.pwd.length<6 || this.pwd.length>64){
        this.toastFn('请输入6到64位的密码');
        return false;
      }
      if(this.pwd !== this.repwd){
        this.toastFn('两次密码输入不一致');
        return false;
      }
      return true;
    },
    submitPwd(){
      var that = this;
      if(!this.regFn()){
        return;
      }
      this.submitDisabled = true;
      this.service('findpwd',{
        phone:this.email,
        password:this.pwd,
        cpassword:this.repwd,
        smscode:this.code
      },'post').then((res) =>{
          this.submitDisabled = false;
          if(res.code === 200){
            this.$router.push('/login');
            this.toastFn(res.msg,'','success');
            return
          }
          this.toastFn(res.msg);
      })
    }
  },
  components:{
    Header,
    XInput,
    Group,
    Captcha
  }
}
</script>
<style>
  .forgetInput{
    margin:30px 25px 0;
  }

</style>
